<template>
    <div>
        <a-upload
                @change="onChange"
                name="file"
                v-bind="$attrs"
                :value="renderImageString"
                action="/system/api/upload/file"
                :showUploadList="false"
                :accept="accept"
                v-if="!value && delVisible"
                :beforeUpload="beforeUpload"
        >
            <a-button :disabled="$attrs.disabled || false">
                <a-icon type="upload"/>
                上传文件
            </a-button>
            <span style="font-size: 10px;color: #818181;"><br/>
            文件大小: {{(size/1024/1024)+'M'}}<br/>
            支持格式: {{accept}}</span>
            <a-tooltip placement="right" v-if="titleVisible">
                <template slot="title">
                    <span>{{title || '我是小提示'}}</span>
                </template>
                <a-icon style="margin-left: 16px;color:#1890ff;" type="question-circle"/>
            </a-tooltip>
        </a-upload>
        <div v-else>
            <span v-if="!value">暂无文件</span>
            <a-button type="primary" v-else>
                <a :href="value" target="_blank">查看文件</a>
            </a-button>
            <a-button type="danger" @click="clear" v-if="delVisible" style="margin-left: 16px;">
                删除文件
            </a-button>
        </div>
        <div class="uoload_hr" :style="{
            width:percent+'%'
        }">

        </div>
    </div>
</template>

<script>
    export default {
        name: "xluploadFile",
        data() {
            return {
                fileList: [],
                size: 5242880,
                accept: '.pdf, .docx, .doc, .xls, .xlsx',
                percent: 0
            }
        },
        props: {
            specifications: {
                type: String,
                default: '5242880;.pdf,.docx,.doc,.xls,.xlsx'
            },
            value: String,
            title: String,
            titleVisible: {
                type: Boolean,
                default: false
            },
            delVisible: {
                type: Boolean,
                default: true
            },
        },
        created() {
            if (this.specifications) {
                let specifications = this.specifications.split(';')
                this.size = Number(specifications[0])
                this.accept = specifications[1]
            }
        },
        methods: {
            beforeUpload(e) {
                if (e.size > this.size) {
                    this.$message.error('文件大小超出限制')
                    return false
                }
                let fileAccept = e.name.split('.').pop()
                let accept = this.accept.slice(1).split(',.')
                if (accept.indexOf(fileAccept.toLowerCase()) == -1) {
                    this.$message.error('文件格式错误')
                    return false
                }
            },
            onChange(info) {
                this.percent = 10
                if (info.event) {
                    this.percent = info.event.percent
                }
                if (info.file.status === 'done') {
                    if (info.file.response.result.resultCode) {
                        if (info.file.response.result.resultCode != '200') {
                            this.$message.error(`${info.file.name} 上传失败`);
                            return
                        }
                    }
                    this.$message.success(`${info.file.name} 文件上传成功`);
                    this.percent = 100
                    setTimeout(_=>{
                        this.percent = 0
                    },1000)
                    this.$emit('change', info.file.response.result.path)
                } else if (info.file.status === 'error') {
                    this.$message.error(`${info.file.name} 上传失败`);
                }
            },
            clear() {
                this.$confirm({
                    title: '提示',
                    content: '确认删除',
                    onOk: () => {
                        this.$emit('change', '')
                        this.percent = 0
                    }
                })
            }
        },
        computed: {
            renderImageString() {
                return this.value
            }
        },
        model: {
            prop: 'value',
            event: 'change'
        }
    }
</script>

<style scoped lang="less">
    .uoload_hr {
        height: 2px;
        background-color: #00a0e9;
        transition: .5s;
        margin-top: 5px;
        border-radius: 1px;
    }
</style>
